<template>
  <el-container >
    <el-main >
  <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"   label-width="100px" class="demo-ruleForm">
       <div class="box1">
         <h3>欢迎加入QF影院</h3>
        <el-form-item label="昵称" prop="uAlias" class="it">
          <el-input v-model="ruleForm.uAlias"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="uPassword" class="it">
          <el-input v-model="ruleForm.uPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword" class="it">
          <el-input v-model="ruleForm.repassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
          <el-form-item label="手机号" prop="uTelephone"  class="it">
            <el-input type="number" v-model="ruleForm.uTelephone" autocomplete="off" ></el-input>
          </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" class="it" id="butt">立即注册</el-button>
       </div>
  </el-form>
    </el-main>
  </el-container>
</template>

<script>
    import Qs from 'qs';
    export default {
        name: "register",
        data(){
            var validaterePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.uPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                ruleForm:{uAlias:'',uPassword:'',repassword:'',uTelephone:''},
                rules:{ uAlias: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2, max: 10, message: '用户名 6 到 10 个字符', trigger: 'blur' }
                    ],
                    uPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 10, message: '密码需要 6 到 10 个字符', trigger: 'blur' }
                    ],
                    repassword: [
                        { required: true, message: '请重复输入密码', trigger: 'blur' },
                        { validator: validaterePassword , min: 6, max: 10, message: '两次密码请保持一致', trigger: 'blur' }
                    ],
                    uTelephone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位的手机号', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{

            submitForm(formName) {
                var vm = this;
                console.log(this.ruleForm);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios({
                            method: "post",
                            url: "http://localhost:80/api/hotmovie/register",
                            transformRequest: [function (data) {
                                return Qs.stringify(data)
                            }],
                            data: this.ruleForm
                        }).then(function (res) {
                            // console.log("1");
                            if (res.data.success) {
                                var str = JSON.stringify(res.data.data);
                                sessionStorage.setItem("userinfo",str);
                                window.location.reload();    //刷新页面
                                // vm.$router.push("/index")

                            } else {
                                vm.$message({
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'error'
                                })
                            }
                            console.log(res);
                        })
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }

        }

    }
</script>

<style scoped>
  .demo-ruleForm{
    width: 550px;
    height: 400px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 420px;
    box-shadow: 0px 0px 5px #DCDFE6;
  }
  .box1{
      width: 500px;
      /*border: green 1px solid;*/
    margin-top: 55px;
  }
  .it{
    width: 500px;
    /*border: red 1px solid;*/
  }
  #butt{
    width: 350px;
    margin-left: 100px;
  }
  h3{
    margin-left: 200px;
    margin-top: -20px;
  }
</style>



<!--//无效代码-->
<!--// this.$refs[formName].validate((valid) => {-->
<!--//     if (valid) {-->
<!--//         console.log("aaaa");-->
<!--//         console.log(this.ruleForm);-->
<!--//-->
<!--//        return true;-->
<!--//-->
<!--//     }-->
<!--//     else {-->
<!--//         console.log('error submit!!');-->
<!--//         return false;-->
<!--//     }-->
<!--// });-->
